@charset "utf-8";
/* CSS Document */
body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
  background-size: 400%;
  animation: bganimation 15s infinite;
}
@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

@charset "utf-8";
/* CSS Document */
*
{
    margin:0;
    padding:0;
	box-sizing:border-box;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

h1{
	margin-top: 10px;
	font-family: "华文行楷";
	/*color: rgba(36,130,202,1.00);*/
	text-align: center;
    font-size: 50px;
}
p{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: aliceblue;
	font-size:40px;
	
}
.container
{  
     position:relative;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
	width:900px;
	height:900px;
	display: flex;
	flex-wrap:wrap;
}
.container .box
{
	position:relative;
	width:300px;
	height:300px;
	overflow:hidden;
	transition:0.5s;
	
}
.container .box:hover
{
	z-index: 1;
	transform:scale(1.10);
	
	box-shadow：0 25px 40px  rgba(0,0,0,.5);
}
.container .box .imgBx
{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
}
.container .box .imgBx:before
{
	content: '';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	/*background:linear-gradient(180deg,#000,#000);*/
	mix-blend-mode: multiply;
	opacity:0;
	transition:0.5s;
}
.container .box:hover .imgBx:before
{
	opacity:1;
}
.container .box .imgBx img
{
	margin: 5px;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit: cover;
}
.container .box .content
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	display:flex;
	padding:20px;
	align-items: center;
}
.container .box .content h2
{
	color:#fff;
	transition:0.5s;
	text-transform: uppercase;
	
	margin-left:100px;
	margin-bottom: 5px;
	font-size:20px;
	transform: translateY(200px);
}
.container .box:hover .content h2
{
	transform: translateY(0);
	transition-delay: 0.6s;
}
.container .box .content p
{
	color:#fff;
	margin-left:95px;
	transform:translateY(200px);
	transition:0.5s;
	font-size:20px;
}
.container .box:hover .content p
{
	transform:translateY(0);
	transition-delay:0.7s;
	
}
a{
	position:relative;
	padding:10px 10px;
	border-radius: 20px;
	font-size:15px;
	color:#FFF;
	text-decoration: none;
	background-image: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
	background-size:400%;
    z-index:1;
}

a:hover{
	animation:show 8s linear infinite;
}


@keyframes show{
	0%{
		background-position:0%;
	}
	100%{
		background-position:400%;
	}
}
a::before{
	position:absolute;
	content: "";
	top:-5px;
	left:-5px;
	right:-5px;
	bottom:-5px;
	background-image:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
	background-size:400%;
	border-radius: 40px;
	z-index:-1;
	filter:blur(20px);
	opacity:0;
}
a:hover::before{
	opacity:1;
	animation:show 8s linear infinite;
}
h1 {
animation: change 6s linear 0s infinite;
}
@keyframes change {
0% {color:rgba(234,8,27,1.00)}
	15%{color:rgba(234,34,164,1.00)}
30% {color: #AC42F2}
	45%{color: rgba(44,85,230,1.00)}
	60%{color: rgba(52,220,236,1.00)}
	75%{color: rgba(71,216,62,1.00)};
	80%{color: rgba(203,236,66,1.00)}90%{color: rgba(232,156,54,1.00)};
	
100% {color:rgba(234,8,27,1.00);}
}
